Download Project  (Full Project)

Step 1:

In this tutorial I will show how to get value in textbox on dropdown selection with database. First open SQL server management studio now create database name like “crud”. Then create a table under crud database. Given the table name like “CarList” This table have three column name like “Id”, “CarName”,  ”CarModel”. In this table “Id” is primary key which is auto increment. Now Given bellow the Database script:

USE [crud]
GO

/****** Object:  Table [dbo].[CarList]    Script Date: 11/14/2019 4:49:29 PM ******/
SET ANSI_NULLS ON
GO

SET QUOTED_IDENTIFIER ON
GO

CREATE TABLE [dbo].[CarList](
	[Id] [int] IDENTITY(1,1) NOT NULL,
	[CarName] [nvarchar](250) NOT NULL,
	[CarModel] [nvarchar](250) NOT NULL,
 CONSTRAINT [PK_CarList] PRIMARY KEY CLUSTERED 
(
	[Id] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]

GO

Step 2:

Now open visual studio then creates an asp.net web application then select MVC now click ok. Visual studio create default project for you. Now create a folder under project given the name like Data. Now connect ADO.NET Entity framework for fetch the data into application. Then create the database instance into home controller. Then create another method name like “GetData”. This method responsible to return “json” data. And we use index view to retrieve the data  and show the view. Given bellow the controller code:

using CarListTest.Data;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace CarListTest.Controllers
{
    public class HomeController : Controller
    {
        crudEntities db = new crudEntities();
        public ActionResult Index()
        {
            return View();
        }
        public ActionResult GetData()
        {
            var data = from als in db.CarList select new { als.CarName, als.CarModel }; 
            return Json(data.ToList(), JsonRequestBehavior.AllowGet);
        }

        public ActionResult About()
        {
            ViewBag.Message = "Your application description page.";

            return View();
        }
        public ActionResult Contact()
        {
            ViewBag.Message = "Your contact page.";

            return View();
        }
    }
}

Step 3:

Now go to index view and write some html, css, and JavaScript code to take the data and show the dropdown list. The c# method returns json data so we use jQuery and Ajax to get the data and show the view. Before write JavaScript code first add reference to jQuery library. Now given bellow the view code:

@{
    ViewBag.Title = "Home Page";
}
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<div class="jumbotron">
    <script type="text/javascript">
        $(document).ready(function () {
            $.ajax({
                type: "GET",
                url: "/Home/GetData",
                data: "{}",
                success: function (data) {
                    var s = '<option value="-1">Please Select a Car</option>';
                    for (var i = 0; i < data.length; i++) {
                        s += '<option value="' + data[i].CarModel + '">' + data[i].CarName + '</option>';
                    }
                    $("#departmentsDropdown").html(s);
                }
            });
        });

        function getValue() {
            var myVal = $("#departmentsDropdown").val();
            $("#show").val(myVal);
        }

    </script>
</div>
<form id="myForm">
    <label for="departmentsDropdown"><b>Car</b></label>
    <select class="form-control" onchange="getValue()" id="departmentsDropdown" name="departmentsDropdown"></select><br />
    <input type="text" value="" id="show" />
</form>

Step 4:

Now build and run the project.